<template>
  <div class="data-center-main" ref="dataCenter">
    <div class="container">
      <div style="padding-top: 15px; padding-left: 15px">
        <div style="display: flex; align-items: center">
          <el-input
            placeholder="请输入SKU名称"
            suffix-icon="el-icon-search"
            v-model="queryParams.skuName"
            style="width: 200px; margin-right: 10px"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            style="
              background: #5b6bf4;
              font-family: 'HarmonyOS_Sans_SC_Regular';
              border: none;
            "
            @click="getList"
            >搜索</el-button
          >
          <el-button
            style="font-family: 'HarmonyOS_Sans_SC_Regular'"
            @click="analyzeData"
            >统计信息</el-button
          >
          <el-button
            style="font-family: 'HarmonyOS_Sans_SC_Regular'"
            @click="batchImportOpen = true"
            >批量新增/导入</el-button
          >
        </div>
        <div style="display: flex; margin-top: 20px; margin-bottom: 20px">
          <el-button
            type="primary"
            style="
              background: #5b6bf4;
              font-family: 'HarmonyOS_Sans_SC_Regular';
              border: none;
            "
            @click="handleAdd"
            >新增</el-button
          >
          <!-- <el-button style="font-family:'HarmonyOS_Sans_SC_Regular'" @click="adjustOpen = true">导出</el-button>
                    <el-button style="font-family:'HarmonyOS_Sans_SC_Regular'">删除</el-button> -->
        </div>
        <div style="height: 640px">
          <el-table :data="list" v-loading="loading" height="620">
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column prop="id" label="序号" align="center">
            </el-table-column>
            <el-table-column prop="skuId" label="SKU编号" align="center">
            </el-table-column>
            <el-table-column
              prop="skuName"
              label="SKU名称"
              width="300"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="pic" label="SKU图片" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.imageUrl" alt="" height="50" />
              </template>
            </el-table-column>
            <el-table-column prop="attribute" label="属性" align="center">
            </el-table-column>
            <el-table-column prop="brand" label="规格" align="center">
            </el-table-column>
            <el-table-column prop="classify" label="所属" align="center">
            </el-table-column>
            <el-table-column prop="mustSell" label="必铺品" align="center">
            </el-table-column>
            <el-table-column prop="new" label="新品" align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  style="color: red"
                  @click="handleDel(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="pageNum"
            :limit.sync="pageSize"
            @pagination="pagination"
          />
        </div>

        <!-- <div class="page">
                    <div style="margin-right: 20px;color: #333;font-family:'HarmonyOS_Sans_SC_Regular'">共7条</div>
                    <el-button type="text" style="color:#333;margin-right: 10px;">
                        <</el-button>
                            <div class="pageborder">1</div>
                            <el-button type="text" style="color:#333;margin-right: 10px;">></el-button>
                            <div style="margin-right: 10px;color: #333;font-family:'HarmonyOS_Sans_SC_Regular'">前往</div>
                            <el-input type="number" style="width: 60px;margin-right: 10px;" :min="0"
                                v-model="pageIndex" />
                            <div style="color: #333;font-family:'HarmonyOS_Sans_SC_Regular'">页</div>
                </div> -->
        <!-- 解绑提示框 -->
        <el-dialog title="解绑算法" :visible.sync="deleteVisible" width="30%">
          <span>是否删除？</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="deleteVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteSKU">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 批量导入 -->
        <el-dialog
          :visible.sync="batchImportOpen"
          width="800px"
          append-to-body
          :show-close="false"
        >
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="批量导入" name="first">
              <el-timeline>
                <el-timeline-item timestamp="下载模板" placement="top">
                  <div class="download">
                    <span
                      style="
                        font-family: 'HarmonyOS_Sans_SC_Regular';
                        color: #777;
                      "
                      >请下载模板，按照模板格式要求编辑后上传，完成导入</span
                    >
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-download"
                      style="
                        color: #5b6bf4;
                        font-family: 'HarmonyOS_Sans_SC_Regular';
                      "
                      >下载模板</el-button
                    >
                  </div>
                </el-timeline-item>
                <el-timeline-item timestamp="上传文件" placement="top">
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      width: 100%;
                      height: 100%;
                      flex-direction: column;
                    "
                  >
                    <el-upload
                      action="https://jsonplaceholder.typicode.com/posts/"
                      list-type="picture-card"
                    >
                      <!-- :on-preview="handlePictureCardPreview" :on-remove="handleRemove"> -->
                      <img
                        src="../../../../assets/images/file.png"
                        style="width: 50px"
                      />
                      <!-- <i class="el-icon-plus"></i> -->
                    </el-upload>
                    <el-button
                      type="primary"
                      style="
                        background: #5b6bf4;
                        font-family: 'HarmonyOS_Sans_SC_Regular';
                        border: none;
                        margin-top: 10px;
                        width: 148px;
                      "
                      >上传文件</el-button
                    >
                  </div>
                </el-timeline-item>
              </el-timeline>
            </el-tab-pane>
            <!-- <el-tab-pane label="批量跟新" name="second">批量跟新</el-tab-pane> -->
          </el-tabs>
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <div
              style="font-family: 'HarmonyOS_Sans_SC_Regular'; color: #777"
            ></div>
            <div>
              <el-button
                style="font-family: 'HarmonyOS_Sans_SC_Regular'"
                @click="batchImportOpen = false"
                >取消</el-button
              >
              <el-button
                type="primary"
                style="
                  background: #5b6bf4;
                  font-family: 'HarmonyOS_Sans_SC_Regular';
                  border: none;
                "
                >开始导入</el-button
              >
            </div>
          </div>
        </el-dialog>
        <!-- 批量导入 -->
        <el-dialog
          :visible.sync="analyzeOpen"
          width="800px"
          append-to-body
          :show-close="false"
        >
          <div class="diabox">
            <span class="charttitle">本品：{{ benpNum }}</span>
            <div id="chart1"></div>
            <span class="charttitle">本品：{{ benpNum }}</span>
            <div id="chart2"></div>
          </div>
        </el-dialog>

        <!-- 以下为弹框相关 -->
        <el-dialog
          :title="dialogTitle"
          :visible.sync="dialogOpen"
          @close="cancel"
          width="800px"
          append-to-body
        >
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="SKU编号" prop="skuId">
                  <el-input v-model="form.skuId" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="SKU名称" prop="skuName">
                  <el-input v-model="form.skuName" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用户商户" prop="userId">
                  <el-select
                    v-model="form.userId"
                    filterable
                    placeholder="请选择"
                    @change="oneLevelUserChange()"
                    :disabled="FormOneLevel"
                  >
                    <el-option
                      v-for="item in initCustomer"
                      :key="item.id"
                      :label="item.nickname"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                  <!-- <el-input v-model="form.userId" placeholder="请输入" /> -->
                </el-form-item>
              </el-col>

              <!-- 二级用户 -->
              <el-col :span="12">
                <el-form-item label="一级经销商" prop="twoUserId">
                  <!-- <el-input v-model="form.userid" placeholder="请输入" /> -->
                  <el-select
                    v-model="form.twoUserId"
                    filterable
                    clearable
                    placeholder="请选择"
                    @change="twoLevelUserChange()"
                    :disabled="FormTwoLevel"
                  >
                    <el-option
                      v-for="item in twoLevelUserList"
                      :key="item.id"
                      :label="item.nickname"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <!-- 三级用户 -->
              <el-col :span="12">
                <el-form-item label="二级经销商" prop="threeUserId">
                  <!-- <el-input v-model="form.userid" placeholder="请输入" /> -->
                  <el-select
                    v-model="form.threeUserId"
                    filterable
                    clearable
                    placeholder="请选择"
                    :disabled="FormThreeLevel"
                  >
                    <el-option
                      v-for="item in threeLevelUserList"
                      :key="item.id"
                      :label="item.nickname"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="SKU品类" prop="classify">
                  <el-radio-group v-model="form.classify">
                    <el-radio :label="0">本品</el-radio>
                    <el-radio :label="1">竞品</el-radio>
                    <el-radio :label="2">他品</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="12" v-if="form.classify === 0">
                <el-form-item label="是否为必铺品" prop="biPuPin">
                  <el-radio-group v-model="form.biPuPin">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="SKU图片" prop="file">
                  <input type="file" ref="file" @change="handFileChange" />
                  <img style="width: 100px" :src="skuImgUrl" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
// import {
//     addSKUV2,
//     modifySKUV2,
//     modifySKUV2NoFile,
//     addSKU,
//     delSKU,
//     modifySKU,
//     getUserSKUList,
//     getSKULibList,
//     bindSKU,
// } from '@/api/goods/SKU'
// import { userListSon, getDadInfoByUserId } from '@/api/user'
// import algoSku from '@/views/goods/components/algo-sku.vue'
// import { listCustomer } from '@/api/customer/customer'
// import { intRole } from '@/utils/formValidate'
// import { getToken } from '@/utils/auth'
// import {
//     algBindV4,
//     getAlgListV4,
//     algUnBindV4,
// }
//     from '@/api/algorithm/algorithm'
// import moment from 'moment'
// import initCust from '@/plugins/mixin'

export default {
  components: {},
  data() {
    return {
      isAdmin: false,
      skuNameList: [],
      layerList: [
        {
          name: "顶层库",
          id: 1,
        },
        {
          name: "中间层库",
          id: 2,
        },
        {
          name: "底层库",
          id: 3,
        },
      ],
      FormOneLevel: false,
      FormTwoLevel: false,
      FormThreeLevel: false,
      twoLevelUserList: [], // 新增/修改框二级用户列表
      threeLevelUserList: [], // 新增/修改框二级用户列表
      twoLevelUserListSearch: [], //  检索二级用户列表
      threeLevelUserListSearch: [], //  检索三级用户列表
      isLevelThree: true,
      showOneLevel: false,
      showTwoLevel: true,
      showThreeLevel: true,
      skuImgUrl: "", //图片url
      bingdingList: "", //搜索框
      classify: "",
      biPuPin: "",
      initCustomer: [],
      showText: "选择绑定sku:-",
      bindLoading: false,
      alogPagn: {
        total: 0,
        pageNum: 1,
        pageSize: 20,
      }, // 分页数据
      chooseValue: "", // 绑定单选框
      alogData: [], // 算法表格数据
      searData: [], //算法表格-搜索框数据
      bindVisible: false, // 绑定算法sku
      deleteVisible: false, // 删除提示
      uploadData: {
        userId: this.$store.state.user.id,
      },
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/sku/upload/", // 上传文件服务器地址
      // 遮罩层
      loading: false,
      pushloading: false,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      pageNum: 1,
      pageSize: 10,
      // 查询参数
      queryParams: {
        skuName: "",
        userId: "",
        twoUserId: "",
        threeUserId: "",
      },
      fileSize: 5,
      dialogOpen: false,
      dialogTitle: "新增SKU",
      rules: {
        skuId: [
          { required: true, message: "不能为空", trigger: "blur" },
          // {
          //   pattern: /^(0|[1-9][0-9]*)$/,
          //   message: "请输入数字",
          //   trigger: "blur"
          // }
        ],
        skuName: [{ required: true, message: "不能为空", trigger: "blur" }],
        // userId: [
        //     { required: true, message: '不能为空', trigger: 'blur' },
        //     { validator: intRole, trigger: 'change' },
        // ],
        skuImgUrl: [{ required: true, message: "请添加图片" }],
      },
      form: {
        skuId: "", //	string allowEmptyValue: false 商品唯一标识，不可修改
        skuName: "", //	string allowEmptyValue: false 商品名称
        userId: "", //integer($int64) allowEmptyValue: false 请先选择要添加的商户：用户的数据表ID
        twoUserId: "", //二级用户
        threeUserId: "", //三级用户
        file: "",
        classify: 0, //产品品类 0本品 1竞品 2他品
        biPuPin: true, //默认不是必铺品 true是 false不是
        id: "", //选中行的id
      },
      searchingForm: {
        layer: "",
        skuId: "",
        skuName: "",
      },
      editRow: null, //修改行
      batchImportOpen: false,
      activeName: "first",
      analyzeOpen: false,
      benpNum: 253,
      jinpNum: 123,
      pageIndex: 1,
      list: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      dialogTitle: "",
      doalogOpen: "",
      Benpopt: {
        color: "#6474FF",
        // title: {
        //     text: '渠道分布',
        //     textStyle: {
        //         fontFamily: 'HarmonyOS_Sans_SC_Medium',
        //         fontSize: 18,
        //         color: '#333333',
        //         fontWeight: 'normal'
        //     }
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        // label: {
        //     show: true,
        //     position: 'top'
        // },
        // legend: { y: 'bottom', data: ['销量', '牌面位', '卖力'] },
        grid: {
          left: "10%",
          right: "0%",
          bottom: "13%",
          top: "20%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["汽水", "水类", "奶类", "功能", "果汁"],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "#8C8C8C",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              interval: "auto",
              //formatter: "{value}%",
              textStyle: {
                color: "#8C8C8C",
              },
            },
            axisLine: {
              show: false,

              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                //show: false,
                type: "dashed",
                color: "#DFDFDF",
              },
            },
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
        ],
        series: [
          {
            data: [300, 200, 400, 350, 250],
            type: "bar",
            barWidth: 20,
          },
        ],
      },
      jinpopt: {
        color: "#6474FF",
        // title: {
        //     text: '渠道分布',
        //     textStyle: {
        //         fontFamily: 'HarmonyOS_Sans_SC_Medium',
        //         fontSize: 18,
        //         color: '#333333',
        //         fontWeight: 'normal'
        //     }
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        // label: {
        //     show: true,
        //     position: 'top'
        // },
        // legend: { y: 'bottom', data: ['销量', '牌面位', '卖力'] },
        grid: {
          left: "10%",
          right: "0%",
          bottom: "13%",
          top: "20%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["汽水", "水类", "奶类", "功能", "果汁"],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "#8C8C8C",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              interval: "auto",
              //formatter: "{value}%",
              textStyle: {
                color: "#8C8C8C",
              },
            },
            axisLine: {
              show: false,

              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                //show: false,
                type: "dashed",
                color: "#DFDFDF",
              },
            },
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
        ],
        series: [
          {
            data: [300, 200, 400, 350, 250],
            type: "bar",
            barWidth: 20,
          },
        ],
      },
    };
  },
  mounted() {
    // console.log(this.$store.state.user)
    // if (this.$store.state.user.level === 1) {
    //     if (this.$store.state.user.name === 'admin') {
    //         this.isAdmin = true
    //         this.form.userId = this.$store.state.user.id
    //         this.queryParams.userId = this.$store.state.user.id
    //         this.oneLevelUserChangeSearch()
    //         this.showOneLevel = false
    //     } else {
    //         console.log("yingjia进入")
    //         this.form.userId = this.$store.state.user.id
    //         console.log("yingjia进入", this.form.userId)
    //         this.queryParams.userId = this.$store.state.user.id
    //         this.oneLevelUserChangeSearch()
    //         this.showOneLevel = true
    //     }
    // }
    // this.loading = true
    // Promise.all([this.getList()]).finally(() => (this.loading = false))
    // // this.getList()
    // listCustomer().then((res) => {
    //     this.initCustomer = res.data.data
    //     console.log('### listCustomer ==>', res)
    //     //this.syncSkuForm.SrcUserId = this.initCustomer[0].id
    // })
  },
  watch: {
    chooseValue() {
      const text = this.infoText();
      this.showText = text;
    },
  },
  beforeDestroy() {},
  methods: {
    getList() {
      let bingdingUserId;
      //绑定要查找的用户id
      // console.log(this.queryParams)
      // if (this.queryParams.threeUserId != '') {
      //     bingdingUserId = this.queryParams.threeUserId
      // } else if (this.queryParams.twoUserId != '') {
      //     bingdingUserId = this.queryParams.twoUserId
      // } else {
      //     bingdingUserId = this.queryParams.userId
      // }
      console.log("bingdingUserId:", this.$store.state.user.id);
      const params = {
        pageIndex: this.pageNum - 1,
        pageSize: this.pageSize,
        //userId: bingdingUserId,
        // skuName: this.queryParams.skuName,
        userId: this.$store.state.user.id,
      };
      this.loading = true;
      const req = getUserSKUList(params)
        .then((res) => {
          if (res && res.data) {
            console.log(res);
            this.list = res.data.data;
            this.total = res.data.totalCount;
          }
        })
        .finally(() => {
          this.loading = false;
        });
      return req;
    },
    //一级用户选择
    oneLevelUserChange() {
      this.form.twoUserId = "";
      this.form.threeUserId = "";
      this.threeLevelUserList = [];
      let that = this;
      console.log("一级用户id", that.form.userId);
      //根据一级用户id查询二级用户列表
      userListSon({ userId: that.form.userId })
        .then((res) => {
          if (res.data != "") {
            console.log("二级用户数据", res.data);
            that.twoLevelUserList = res.data;
            that.showTwoLevel = false;
          } else {
            that.twoLevelUserList = "";
            that.showTwoLevel = true;
          }
        })
        .catch((err) => {
          console.log("## err ==> ", err);
        });
      that.$forceUpdate();
    },
    //二级用户选择
    twoLevelUserChange() {
      this.form.threeUserId = "";
      this.threeLevelUserList = [];
      // console.log("一级用户选择",this.form.userId)
      console.log("二级用户选择", this.form.twoUserId);
      let that = this;
      userListSon({ userId: that.form.twoUserId })
        .then((res) => {
          if (res.data != "") {
            console.log("三级用户数据", res.data);
            that.threeLevelUserList = res.data;
            that.showThreeLevel = false;
          } else {
            that.threeLevelUserList = "";
          }
        })
        .catch((err) => {
          console.log("## err ==> ", err);
        });
      that.$forceUpdate();
    },
    //修改框-调用一下userListson方法
    oneLevelUserChangeEdit() {
      // this.form.twoUserId=''
      let that = this;
      console.log("一级用户id", that.form.userId);
      //根据一级用户id查询二级用户列表
      userListSon({ userId: that.form.userId })
        .then((res) => {
          if (res.data != "") {
            console.log("二级用户数据", res.data);
            that.twoLevelUserList = res.data;
            that.showTwoLevel = false;
          } else {
            that.showTwoLevel = true;
          }
        })
        .catch((err) => {
          console.log("## err ==> ", err);
        });
      that.$forceUpdate();
    },
    //修改框-调用一下userListson方法
    twoLevelUserChangeEdit() {
      // this.form.threeUserId=''
      // console.log("一级用户选择",this.form.userId)
      console.log("二级用户选择", this.form.twoUserId);
      let that = this;
      userListSon({ userId: that.form.twoUserId })
        .then((res) => {
          if (res.data != "") {
            console.log("三级用户数据", res.data);
            that.threeLevelUserList = res.data;
            that.showThreeLevel = false;
          }
        })
        .catch((err) => {
          console.log("## err ==> ", err);
        });
      that.$forceUpdate();
    },

    oneLevelUserChangeSearch() {
      this.queryParams.twoUserId = "";
      this.queryParams.threeUserId = "";
      this.showTwoLevel = true;
      this.showThreeLevel = true;
      let that = this;
      console.log("搜索、一级用户id", that.queryParams.userId);
      //根据一级用户id查询二级用户列表
      userListSon({ userId: that.queryParams.userId })
        .then((res) => {
          if (res.data != "") {
            console.log("搜索、二级用户数据", res.data);
            that.twoLevelUserListSearch = res.data;
            //选了一级用户 并且这个一级用户有二级子用户的话
            that.showTwoLevel = false;
          }
        })
        .catch((err) => {
          console.log("## err ==> ", err);
        });
      that.$forceUpdate();
    },
    //搜索二级用户选择
    twoLevelUserChangeSearch() {
      this.queryParams.threeUserId = "";
      this.showThreeLevel = true;
      console.log("搜索、二级用户选择", this.queryParams.twoUserId);

      let that = this;
      userListSon({ userId: that.queryParams.twoUserId })
        .then((res) => {
          if (res.data != "") {
            console.log("搜索、三级用户数据", res.data);
            that.threeLevelUserListSearch = res.data;
            that.showThreeLevel = false;
          }
        })
        .catch((err) => {
          console.log("## err ==> ", err);
        });
      //点击完option后出现label值没有渲染到select框的问题，强制刷新一次
      that.$forceUpdate();
    },
    //搜索框三级用户选择
    threeLevelUserChangeSearch() {
      console.log("搜索、三级用户选择", this.queryParams.threeUserId);
      this.$forceUpdate();
    },
    handFileChange(e) {
      console.log(e);
      let fileData = e.target.files[0]; //这是我们上传的文件
      console.log("@@ ee => ", fileData);
      // this.algoForm.algMainImg = fileData
      let url = URL.createObjectURL(fileData);
      this.skuImgUrl = url;
      this.form.file = fileData;
      console.log(this.form);
    },
    clearSearchingForm() {
      (this.searchingForm.skuId = ""),
        (this.searchingForm.skuName = ""),
        this.queryBySearchingForm();
    },
    queryBySearchingForm() {
      const params = {
        skuId: this.searchingForm.skuId,
        skuName: this.searchingForm.skuName,
        pageIndex: 0,
        pageSize: this.alogPagn.pageSize,
        layer: 0,
      };
      console.log(params);
      this.bindLoading = true;
      getAlgListV4(params)
        .then((res) => {
          const { data, pageIndex, totalCount } = res.data || {};
          this.alogData = data;
          this.alogPagn = {
            total: totalCount,
          };
          console.log("## 检索结果为 ==>", res);
        })
        .finally(() => {
          this.bindLoading = false;
        });
    },
    commonFormat(row, column, cellValue, index) {
      // console.log('## row, column cellValue index', row, column, cellValue, index)
      return !cellValue && cellValue !== 0 ? "-" : cellValue;
    },
    confirmBind() {
      if (this.chooseValue) {
        //清除检索框的数值
        this.searchingForm.skuId = "";
        this.searchingForm.skuName = "";
        // todos modal关闭的时候清空 chooseValue
        console.log("选中值", this.chooseValue);
        const chooseItem = this.getBindDataById(this.chooseValue);
        console.log("选中项", chooseItem);
        const params = {
          algSkuId: chooseItem.skuId,
          algSkuName: chooseItem.skuName,
          userSkuId: this.bindRow.id,
        };
        this.bindLoading = true;
        algBindV4(params)
          .then((res) => {
            this.$message.success("算法绑定成功！");
            console.log("## 绑定成功 ==>", res);
            this.bindVisible = false;
            this.pagination();
          })
          .catch((err) => {
            if (err.code === 1) {
              if (err.message == "SKU未注册完整") {
                this.$message("三层算法未注册完整，请检查");
              } else {
                this.$message(err.message);
              }
            }
          })
          .finally(() => {
            this.bindLoading = false;
          });
      } else {
        this.$message.error("请选择绑定sku");
      }
    },

    infoText() {
      const ret = this.getBindDataById(this.chooseValue) || {};
      return `选择绑定sku: ${ret.skuName || "-"}`;
    },
    // 通过Id查询整条数据
    getBindDataById(id) {
      console.log("## ", id, this.alogData);
      return this.alogData.find((item) => item.skuId === id);
    },
    pagination() {
      this.loading = true;
      this.getList().finally(() => (this.loading = false));
    },
    handleAdd() {
      this.dialogTitle = "新增SKU";
      this.dialogOpen = true;
      if (this.$store.state.user.level === 1) {
        this.form.userId = this.$store.state.user.id;
        this.oneLevelUserChange();
        this.FormOneLevel = false;
      } else if (this.$store.state.user.level === 2) {
        this.form.twoUserId = this.$store.state.user.id;
        this.twoLevelUserChange();
        this.FormOneLevel = true;
        this.FormTwoLevel = false;
        this.FormThreeLevel = false;
      } else {
        this.form.twoUserId = this.$store.state.user.id;
        this.twoLevelUserChange();
        this.FormOneLevel = true;
        this.FormTwoLevel = true;
        this.FormTwoLevel = false;
      }
    },
    formateTime(time) {
      return moment(time).format("YYYY-MM-DD HH:mm:ss");
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        // todos 添加loading

        if (this.form.classify !== 0) {
          this.form.biPuPin = false;
        }
        let bingdingUserId;
        //绑定要查找的用户id
        console.log(this.form);
        if (this.form.threeUserId != "") {
          bingdingUserId = this.form.threeUserId;
        } else if (this.form.twoUserId != "") {
          bingdingUserId = this.form.twoUserId;
        } else {
          bingdingUserId = this.form.userId;
        }
        const form = {
          skuId: this.form.skuId, //	string allowEmptyValue: false 商品唯一标识，不可修改
          skuName: this.form.skuName, //	string allowEmptyValue: false 商品名称
          userId: bingdingUserId, //integer($int64) allowEmptyValue: false 请先选择要添加的商户：用户的数据表ID
          file: this.form.file,
          classify: this.form.classify, //产品品类 0本品 1竞品 2他品
          biPuPin: this.form.biPuPin, //默认不是必铺品 true是 false不是
          id: this.form.id, //选中行的id
        };

        // this.form.imageUrl=''

        let str = "";
        Object.keys(form).forEach((key) => {
          if (key !== "file") {
            str += `&${key}=${form[key]}`;
          }
        });
        const formData = new FormData();

        this.loading = true;
        if (this.editRow) {
          if (this.form.file != "") {
            console.log("图片修改比对");
            console.log(form.file);
            console.log(this.fetchFile(this.form.imageUrl));
            formData.append("file", form.file);
            const params = {
              url: str,
              file: formData,
            };
            modifySKUV2(params)
              .then((res) => {
                this.getList();
                this.$message.success("修改SKU成功");
                this.cancel();
              })
              .catch((err) => {
                console.log(err);
                this.$message.error(err.message || "修改SKU失败");
              })
              .finally(() => {
                this.loading = false;
              });
          } else {
            formData.append("file", this.fetchFile(this.form.imageUrl));
            // formData=this.fetchFile(this.form.imageUrl)
            const params = {
              url: str,
            };
            modifySKUV2NoFile(params)
              .then((res) => {
                this.getList();
                this.$message.success("修改SKU成功");
                this.cancel();
              })
              .catch((err) => {
                console.log(err);
                this.$message.error(err.message || "修改SKU失败");
              })
              .finally(() => {
                this.loading = false;
              });
          }
        } else {
          formData.append("file", form.file);
          const params = {
            url: str,
            file: formData,
          };
          addSKUV2(params)
            .then((res) => {
              this.getList();
              this.$message.success("添加SKU成功");
              this.cancel();
            })
            .catch((err) => {
              console.log(err);
              this.$message.error(err.message || "添加SKU失败");
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },
    fetchFile(url, fileName) {
      fetch(url)
        .then((response) => response.blob())
        .then((blob) => {
          //将blob对象转换为file并返回
          return new new File([blob], fileName, {
            type: blob.type,
            lastModified: Date.now(),
          })();
        });
    },
    cancel() {
      this.editRow = null;
      this.dialogOpen = false;
      // this.form={}
      this.form.skuId = "";
      this.form.skuName = "";
      this.form.imageUrl = "";
      this.form.userId = 0;
      this.form.classify = 0;
      this.form.biPuPin = true;
      this.form.file = "";
      this.form.id = "";
      this.skuImgUrl = "";
    },

    handldBefore(file) {
      console.log("上船前", file);
      let fileName = file.uid + file.name; // 如果可以上传多个文件，这里需要用fileList.forEach()处理
      let f = new File([file.raw], fileName);
      f.uid = file.uid; // new File 没有uid属性，会导致组件底层报错，这里手动加上
      // file.raw = f;  // 用f替换file的数据
      file = f;
      // file.name=f.name

      // this.$refs.upload.submit(); // 手动触发上传

      console.log("处理后的文件名", file);
      // handleUploadSuccess()

      //  console.log("上船前",file)
      //  file.name=file + file.uid

      //  const littleName = file.name + file.uid
      //  const copyFile = new File([file], littleName)
      //  file=copyFile

      //  console.log(file)
      return true;
    },
    handleChange(file) {
      console.log("文件改变change", file);
      console.log("上船前", file);
      let fileName = file.uid + file.name; // 如果可以上传多个文件，这里需要用fileList.forEach()处理
      let f = new File([file.raw], fileName);
      f.uid = file.uid; // new File 没有uid属性，会导致组件底层报错，这里手动加上
      // file.raw = f;  // 用f替换file的数据
      file = f;
      // file.name=f.name
      if (file.response.success) {
        // this.form.imageUrl = URL.createObjectURL(file.raw);
        this.form.imageUrl = file.response?.data;
        console.log(this.form.imageUrl);
      } else {
        // this.$message.error(file.response.message || '上传图片失败')
        this.$message.error(file.response.message || "上传图片失败");
      }

      // this.$refs.upload.submit(); // 手动触发上传
      console.log("处理后的文件名", file);
    },
    handleUploadSuccess(response, file, fileList) {
      console.log(file);
      console.log("## response ==>", response);
      if (response.success) {
        // this.form.imageUrl = URL.createObjectURL(file.raw);
        this.form.imageUrl = response?.data;
        console.log(this.form.imageUrl);
      } else {
        // this.$message.error(file.response.message || '上传图片失败')
        this.$message.error(response.message || "上传图片失败");
      }
    },
    handleUploadError(err, file, fileList) {
      console.log("## handleUploadError", err);
      this.$message.error(err.message || "上传图片失败");
    },
    /** 查询 */
    getList(obj) {
      let bingdingUserId;
      //绑定要查找的用户id
      console.log(this.queryParams);
      if (this.queryParams.threeUserId != "") {
        bingdingUserId = this.queryParams.threeUserId;
      } else if (this.queryParams.twoUserId != "") {
        bingdingUserId = this.queryParams.twoUserId;
      } else {
        bingdingUserId = this.queryParams.userId;
      }
      console.log("bingdingUserId:", bingdingUserId);
      const params = {
        pageIndex: this.pageNum - 1,
        pageSize: this.pageSize,
        userId: bingdingUserId,
        skuName: this.queryParams.skuName,
        // userId: this.$store.state.user.id
      };
      this.loading = true;
      const req = getUserSKUList(params)
        .then((res) => {
          if (res && res.data) {
            console.log(res);
            this.list = res.data.data;
            this.total = res.data.totalCount;
          }
        })
        .finally(() => {
          this.loading = false;
        });
      return req;
    },
    // 条件查询
    queryByForm() {
      const params = {
        ...this.queryParams,
        pageIndex: 0,
      };
      console.log("## skuName ==>", params, this.queryParams);
      this.getList(params);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.total > this.pageNum * this.pageSize) {
        this.pageNum += 1;
        this.getList();
      }
    },
    /**
     * 修改SKU
     * @param {Object} row
     */
    handleEdit(row) {
      console.log("## 选中行数据为 ==>", row);
      this.editRow = row;
      if (row.user.level === 1) {
        this.form.skuId = row.skuId;
        this.form.skuName = row.skuName;
        this.form.imageUrl = row.imageUrl;
        this.form.classify = row.classify;
        this.form.biPuPin = row.biPuPin;
        this.form.userId = row.user?.id;
        this.skuImgUrl = row.imageUrl;
        this.form.id = row.id;
        this.oneLevelUserChange();
      } else if (row.user.level === 2) {
        //二级
        this.form.skuId = row.skuId;
        this.form.skuName = row.skuName;
        this.form.imageUrl = row.imageUrl;
        this.form.classify = row.classify;
        this.form.biPuPin = row.biPuPin;
        this.form.twoUserId = row.user?.id;
        this.skuImgUrl = row.imageUrl;
        this.form.id = row.id;

        getDadInfoByUserId({ userId: this.form.twoUserId })
          .then((res) => {
            //父用户（一级用户、品牌）赋值
            console.log(res);
            this.form.userId = res.data.id;
            this.oneLevelUserChangeEdit();
          })
          .catch((err) => {
            console.log("## err ==> ", err);
          });
        this.twoLevelUserChange();
      } else if (row.user.level === 3) {
        //三级
        this.form.skuId = row.skuId;
        this.form.skuName = row.skuName;
        this.form.imageUrl = row.imageUrl;
        this.form.classify = row.classify;
        this.form.biPuPin = row.biPuPin;
        this.form.threeUserId = row.user?.id;
        this.skuImgUrl = row.imageUrl;
        this.form.id = row.id;

        getDadInfoByUserId({ userId: this.form.threeUserId })
          .then((res) => {
            //父用户（二级用户、品牌）赋值
            console.log("//父用户（二级用户、品牌）赋值", res);
            this.form.twoUserId = res.data.id;
          })
          .catch((err) => {
            console.log("## err ==> ", err);
          })
          .then(() => {
            getDadInfoByUserId({ userId: this.form.twoUserId })
              .then((res) => {
                //父用户（一级用户、品牌）赋值
                console.log(res);
                this.form.userId = res.data.id;
                console.log(this.form);
                this.oneLevelUserChangeEdit();
                this.twoLevelUserChangeEdit();
              })
              .catch((err) => {
                console.log("## err ==> ", err);
              });
          });
      }

      this.dialogOpen = true;
      this.dialogTitle = "修改SKU";
    },
    // 绑定算法sku
    handleBind(row) {
      this.bindRow = row;
      if (this.bindRow.v4SkuName !== null) {
        this.$message("当前暂未开放换绑功能，请先解绑再绑定！");
        return;
      }
      this.searchingForm.skuId = "";
      this.searchingForm.skuName = "";
      this.bindVisible = true;
      this.getAlgoData();
      this.getSearAlgoData();
    },
    handleSelectionChange(val) {
      console.log("## handleSelectionChange ==>", val);
    },
    aloGpagination(value) {
      console.log("## value ==>", value);
      this.getAlgoData({ pageIndex: value.page - 1, pageSize: value.limit });
    },
    //绑定算法搜索框-初始化
    getSearAlgoData() {
      const params = {
        pageIndex: 0,
        pageSize: 10000,
        layer: 0,
      };
      this.bindLoading = true;
      getAlgListV4(params)
        .then((res) => {
          const { data, pageIndex, totalCount } = res.data || {};
          this.searData = data;
          console.log("searchData", this.searData);
          for (var i = 0; i < this.searData.length; i++) {
            if (this.skuNameList.indexOf(this.searData[i].skuName) === -1) {
              this.skuNameList.push(this.searData[i].skuName);
            }
          }
          console.log("商品名称列表", this.skuNameList);

          this.alogPagn = {
            pageNum: pageIndex + 1,
            total: totalCount,
          };
          console.log("## loading ==> ", res);
        })
        .finally(() => {
          this.bindLoading = false;
        });
    },
    getAlgoData(obj = {}) {
      const params = {
        pageIndex: 0,
        pageSize: obj.pageSize,
        layer: 0,
        ...obj,
      };
      this.bindLoading = true;
      getAlgListV4(params)
        .then((res) => {
          const { data, pageIndex, totalCount } = res.data || {};
          this.alogData = data;
          this.alogPagn = {
            pageNum: pageIndex + 1,
            total: totalCount,
          };
          console.log("## loading ==> ", res);
        })
        .finally(() => {
          this.bindLoading = false;
        });
    },
    handleCancelBind(row) {
      console.log("解除绑定", row);
      if (row.v4SkuName === null) {
        this.$message.error("该SKU并未绑定V4算法");
        return;
      }
      const params = {
        algSkuName: row.v4SkuName,
        userSkuId: row.id,
      };
      algUnBindV4(params)
        .then((res) => {
          this.$message.success("解绑成功！");
          // this.getList()
          this.pagination();
          console.log(res);
        })
        .catch((err) => {
          if (err.code === 1) {
            this.$message.error(err.message);
          }
        });
    },
    handleDel(row) {
      this.delRow = row;
      this.deleteVisible = true;
    },
    /** 删除按钮 */
    deleteSKU() {
      let row = this.delRow;
      //删除前判断是否有绑定
      if (row.v4SkuName !== null) {
        const params = {
          algSkuName: row.v4SkuName,
          userSkuId: row.id,
        };
        algUnBindV4(params)
          .then((res) => {
            console.log("解绑", res);
            if (res.code === 0) {
              console.log("解绑成功");
              this.loading = true;
              delSKU({ id: String(row.id) })
                .then((res) => {
                  this.getList();
                  this.$message.success("SKU删除成功");
                })
                .catch((err) => {
                  this.$message.error(err.message || "SKU删除失败");
                })
                .finally(() => {
                  this.loading = false;
                  this.deleteVisible = false;
                });
            }
            // this.$message.success("解绑成功！")
            // // this.getList()
            // this.pagination()
            // console.log(res)
          })
          .catch((err) => {
            if (err.code === 1) {
              this.$message.error(err.message);
            }
          });
      } else {
        this.loading = true;
        delSKU({ id: String(row.id) })
          .then((res) => {
            this.getList();
            this.$message.success("SKU删除成功");
          })
          .catch((err) => {
            this.$message.error(err.message || "SKU删除失败");
          })
          .finally(() => {
            this.loading = false;
            this.deleteVisible = false;
          });
      }
    },
    analyzeData() {
      this.analyzeOpen = true;
      setTimeout(() => {
        var chartDom = document.getElementById("chart1");
        var jinpoptChart = this.$echarts.init(chartDom);
        jinpoptChart.setOption(this.jinpopt);
        var chartDom = document.getElementById("chart2");
        var BenpoptChart = this.$echarts.init(chartDom);
        BenpoptChart.setOption(this.Benpopt);
        window.onresize = () => {
          jinpoptChart.resize();
          BenpoptChart.resize();
        };
      }, 500);
    },
    handleAdd() {
      this.dialogTitle = "新增SKU";
      this.dialogOpen = true;
      // if (this.$store.state.user.level === 1) {
      //     this.form.userId = this.$store.state.user.id
      //     this.oneLevelUserChange()
      //     this.FormOneLevel = false
      // } else if (this.$store.state.user.level === 2) {
      //     this.form.twoUserId = this.$store.state.user.id
      //     this.twoLevelUserChange()
      //     this.FormOneLevel = true
      //     this.FormTwoLevel = false
      //     this.FormThreeLevel = false
      // } else {
      //     this.form.twoUserId = this.$store.state.user.id
      //     this.twoLevelUserChange()
      //     this.FormOneLevel = true
      //     this.FormTwoLevel = true
      //     this.FormTwoLevel = false
      // }
    },
    pagination() {
      this.loading = true;
      this.getList().finally(() => (this.loading = false));
    },
    batchImport() {
      this.batchImportOpen = true;
    },
    handleClick() {},
    cancel() {
      this.modifyDrawer = false;
      this.dialogOpen = false;
    },
    handleCheckChange(node) {
      console.log("node", node.id);
      console.log("this.checkedMore", this.checkedMore);

      if (this.checkedMore.includes(node.id)) {
        this.partUpdateList.map((e, index) => {
          if (e == node.label) {
            console.log("index", index);
            this.partUpdateList.splice(index, 1);
          }
        });
        this.checkedMore.splice(this.checkedMore.indexOf(node.id), 1);
      } else {
        this.partUpdateList.push(node.label);
        this.checkedMore.push(node.id);
      }

      // if(data.checked){ ///???如何过去选中状态
      //     console.log('data', data);
      // this.partUpdateList.push(data.label)
      // }else{
      //     this.partUpdateList.splice(1, 1)
      // }
    },
    del(item) {
      console.log("item", item);
      this.partUpdateList.map((e, index) => {
        if (e == item) {
          console.log("index", index);
          this.partUpdateList.splice(index, 1);
        }
      });
      //this.partUpdateList.splice(id,1)
    },
  },
};
</script>

<style lang="scss" scoped>
.data-center-main {
  background-color: #f3f3f3;
  width: 100%;
  height: calc(100vh - 85px);
  display: flex;
  padding: 1%;
}

.container {
  width: 100%;
  height: 100%;
  background-color: white;
  //padding:15px
}

.top {
  width: 100%;
  height: 10%;
  border-bottom: 1px solid #e8e8e8;
  //border: solid 1px red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #d7d7d7;
}

.left {
  width: 20%;
  height: 90%;
  display: flex;
  flex-direction: column;
  padding: 15px;
  border-right: 1px solid #d7d7d7;
  // border-top: 1px solid #D7D7D7;
}

::v-deep .el-tree > .el-tree-node > .el-tree-node__content {
  background-color: #5b6bf4 8%;
}

//树形结构一级背景
.right {
  width: 79%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.right-top {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #d7d7d7;
  padding-left: 15px;
}

// ::v-deep .betchUpload.el-dialog__header {
//     padding: 0px;
// }

// ::v-deep .betchUpload.el-dialog__body {
//     padding: 1 20px;
// }

::v-deep .el-upload {
  display: flex;
  text-align: center;
  cursor: pointer;
  outline: none;
  justify-content: center;
  align-items: center;
}

::v-deep .el-upload--picture-card {
  background-color: white; // border: 1px dashed #c0ccda;
}

::v-deep .el-drawer__header {
  background-color: #7e8eff;
  color: white;
  display: flex;
  margin-bottom: 32px;
  padding: 20px;
  padding-bottom: 20px;
  align-items: center;
  font-family: "HarmonyOS_Sans_SC_Regular";
}

.download {
  width: 500px;
  height: 60px;
  background-color: rgba(91, 107, 244, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.group {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "HarmonyOS_Sans_SC_Regular";
}

.group > div {
  width: 25%;
  height: 36px;
  background: rgba(91, 107, 244, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.page {
  display: flex;
  height: 80px;
  width: 100%;
  justify-content: center;
  align-items: center;
  box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.02);
  bottom: 10px;
  position: absolute;
}

.pageborder {
  margin-right: 10px;
  border: 1px solid #dcdfe6;
  width: 40px;
  height: 36px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  font-family: "HarmonyOS_Sans_SC_Regular";
}

#chart1 {
  width: 100%;
  height: 300px;
}

#chart2 {
  width: 100%;
  height: 300px;
}

.charttitle {
  font-family: "HarmonyOS_Sans_SC_Regular";
  font-size: 18px;
}

::v-deep .el-input__inner::-webkit-outer-spin-button,
::v-deep .el-input__inner::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

::v-deep .el-input__inner[type="number"] {
  -moz-appearance: textfield;
}
</style>
